<template>
    
    <!-- 组件模板内容 -->
    <div class="comp-wrap">
        <div class="weui-cells__title black relative">{{title}}<span v-if="required == 1" class="required_icon"> (必填)</span></div>
        <div class="weui-cells__tips">{{tip}}</div>
        <div class="weui-cells mr-top-0">
            <!-- <div class="weui-cell weui-cell_select">
                <div class="weui-cell__bd">
                    <validator name="validation1">
                        <select 
                            class="weui-select" 
                            name="select1" 
                            v-model="val"
                            @valid="onValid" 
                            @invalid="onInvalid"
                            v-validate:username="['required']"
                        >
                            <option selected value=""  >请选择</option>
                            <option v-for="o in opts" >{{typeof o === 'object' ? o.opt : o}}</option>
                        </select>
                    </validator>
                </div>
            </div> -->
            <a class="weui-cell weui-cell_access  padding_a" href="javascript:;" @click="showPicker"">
                <div class="weui-cell__bd isValue">
                    <p v-if="isTip" class="isTip">{{sel}}</p>
                    <p v-else>{{sel}}</p>
                </div>
                <div class="weui-cell__ft height">
                </div>
            </a>
        </div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Navtive API
     *  example : import widget from 'gapi/widget'
     */
    // import Vue from 'vue'
    // import VueValidator from 'vue-validator'
    // Vue.use(VueValidator)

    import clientUi from 'gapi/clientUi.js'

    /**
     *  引入Action
     *  example : import { someFunction } from './SomeAction'
     */
    
    /**
     *  引入Getter
     *  example : import { someFunction } from './SomeGetters'
     */

    export default {
        data: () => {
            return {
                sel: '请选择',
                options: {
                    data1: []
                },
                select : [0],
                isTip: true
            }
        },
        vuex: {
            getters: {
                
            },
            actions: {

            }
        },
        props: ['title', 'tip', 'val', 'opts', 'required', 'isvalid'],
        methods: {
            // onValid (){
            //     this.isvalid = true
            // },
            // onInvalid (){
            //     if(this.required == 0){
            //         this.isvalid = true
            //     }else{
            //         this.isvalid = false
            //     }
            // }
            showPicker (){

                this.options.data1 = this.opts 
                clientUi.showPicker(this.options, this.select, "请选择", (data) => {
                    // console.log(data.name)
                    // console.log(data.age)
                    // alert(data.data1)
                    if(data.data1 !== undefined){
                        this.sel = this.options.data1[data.data1];
                        this.select = [data.data1]
                        this.val = this.sel
                        this.isTip = false
                    }
                    
                })
            }
        },
        created (){
            
        }
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style type="text/css">
    div.mr-top-0{
        margin-top: 0px;
    }
    div.weui-cells__tips{
        margin-bottom: .3em;
    }
    .relative{
        position:relative;
    }
    .relative img{
        position:absolute;
        right:10px;
    }
    .weui-cell.padding{
        padding:8px;
        padding-left: 12px;
    }
</style>

